<!-- pages/components/swiper/swiper.vue -->
<template>
	<view class="wrapper">
		<view class="title">基础轮播图</view>
		<!-- 
		  要点: 
		  1. 必须给 swiper 一个固定的高度(height)
		  2. indicator-dots: 显示小圆点
		  3. autoplay: 自动播放
		  4. circular: 循环播放
		-->
		<swiper class="swiper-box" indicator-dots="true" autoplay="true" interval="3000" circular="true">
			<swiper-item>
				<view class="swiper-item" style="background-color: #007aff;">
					<text>页面 1</text>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" style="background-color: #4cd964;">
					<text>页面 2</text>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" style="background-color: #f0ad4e;">
					<text>页面 3</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		}
	}
</script>

<style>
.wrapper {
	padding: 15px;
}
.title {
	font-size: 16px;
	font-weight: bold;
	padding: 10px 5px;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 10px;
}

.swiper-box {
	height: 200px; /* 必须有固定高度 */
}
.swiper-item {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-item text {
	color: white;
	font-size: 24px;
}
</style>